<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>添加到列表</title>
    <script src="../js/vue.js"></script>
    <style>
        #app {
            width: 100%;
            padding: 20px;
        }

        ul,
        li {
            padding: 0;
            margin: 0;
        }

        input {
            width: 200px;
            height: 30px;
            padding-left: 10px;
        }

        .list {
            list-style: none;
        }

        .list li {
            width: 300px;
            height: 40px;
            line-height: 40px;
            border-bottom: 1px solid #af5b5e;
        }

        .list li span {
            float: left;
        }

        .list li em {
            float: right;
        }
    </style>
</head>

<body>
    <div id="app">
        <input type="text" 
        placeholder="按enter键可添加列表内容"
         @keydown.enter="enterFn" 
         v-model="val" />
        <ul class="list">
            <li v-for="item in dataList">
                <span>{{item.title}}</span>
                <!-- <em>{{item.date}}</em> -->
            </li>
        </ul>
    </div>
    <script>
        var Date = new Date()
        var vm = new Vue({
            el: '#app',
            data: {
                dataList: [],
                val: ''
            },
            methods: {
                enterFn() {

                    this.dataList.push({
                        title: this.val,
                        // date: `${Date.getFullYear()}-${getTwo(Date.getMonth() + 1)}-${getTwo(Date.getDate())}`
                    })
                    this.val = ''
                }
            }
        })
        function getTwo(n) {
            return n < 10 ? '0' + n : '' + n
        }
             // 方法1:
//         // var Date = new Date()
//         // var vm = new Vue({
//         //     el: '#app',
//         //     data: {
//         //         dataList: [],
//         //         val: ''
//         //     },
//         //     methods: {
//         //         enterFn() {
//         //             this.dataList.push({
//         //                 title: this.val,
//         //             })
//         //             this.val = ''
//         //         }
//         //     }
//         // })
//         // function getTwo(n) {
//         //     return n < 10 ? '0' + n : '' + n
//         // }
//         // 方法2:
//         document.onkeydown = (e)=> {   //按下回车提交
//         let key = window.event.keyCode;
//         //事件中keycode=13为回车事件
//         if (key == 13) {
//           this.Initialize();
//         }
//       };
//     //   方法3:document.addEventListener监听keyup事件
//     mounted () {
//       // 绑定enter事件
//       this.enterKeyup();
//     },
//     destroyed() {
//       // 销毁enter事件
//       this.enterKeyupDestroyed();
//     },
//         methods: {
//       //关闭
//       shoutDown () {

//       },
//       // 点击重置按钮，重置登录表单
//       resetLoginForm () {
//         // console.log(this);
//         // this.$refs.loginFormRef.resetFields()
//       },
//       enterKey(event) {
//         const componentName = this.$options.name;
//         console.log(componentName)
//         if (componentName == "login") {
//           const code = event.keyCode
//             ? event.keyCode
//             : event.which
//               ? event.which
//               : event.charCode;
//           if (code == 13) {
//             this.Initialize();
//           }
//         }
//       },
//       enterKeyupDestroyed() {
//         document.removeEventListener("keyup", this.enterKey);
//       },
//       enterKeyup() {
//         document.addEventListener("keyup", this.enterKey);
//       },
//       //初始化登录
//       Initialize(){
//       }
//   }
//事件中keycode=13为回车事件
/*
一、给button按钮绑定@keyup.enter

<div class="btn">
       <Button  type="primary" @click="handleAddBook" @keyup.enter="handleAddBook">录入</Button>
</div>
 

二、浏览器url：event.target.baseURI;

created(){

       this.keyupEnter()
 },
 methods:{
            keyupEnter(){
                document.onkeydown = e =>{
                    let body = document.getElementsByTagName('body')[0]
                    if (e.keyCode === 13 && e.target.baseURI.match(/inputbook/) && e.target === body) {
                        console.log('enter')
                        this.handleAddBook()
                    }
                }
            },
            handleAddBook(){
                if(this.validate()){
                    this._printQrcode()
                }  
            }
}*/
    </script>
</body>

</html>